<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nextTick</title>

</head>

<body>
    <div id="app">
        <!-- 使用自定义组件 -->
        <!-- <my-component></my-component> -->
        <!-- <my-component></my-component>
        <my-component></my-component>
        <my-component></my-component>
        <div>=======</div>
        <my-comp></my-comp>
        <my-comp></my-comp>
        <my-comp></my-comp> -->

        <my-comp></my-comp>
    </div>


    <!-- 引入vue -->
    <script src=" https://unpkg.com/vue@3/dist/vue.global.js">
    </script>
    <script>
        const { createApp, ref, onMounted, nextTick, getCurrentInstance } = Vue;
        // 创建Vue实例
        const app = createApp({
            setup() {

                return {

                }
            },
            // 局部注册组件
            components: {
                // key值是组件名称，value值是组件对象
                'my-comp': {
                    template: `
                        <div>
                            <h1>局部注册 我是自定义组件</h1>
                            <p>局部注册 我是自定义组件的描述</p>
                            <my-component></my-component>
                        </div>
                    `
                }
            }

        })


        // 全局注册组件
        // app.component(组件名称,组件对象)
        app.component('my-component', {
            // 模板 对应就是DOM结构
            template: `
                <div>
                    <h1>我是自定义组件</h1>
                    <p>我是自定义组件的描述</p>
                  
                </div>
            `
        })
        // 挂载到dom
        app.mount('#app')
    </script>
</body>

</html>